<template>
  <div class="card" @click="getDayOne">
    <!--展示名片头部--头像名称-->
    <div class="card-header">
        <el-avatar :size="65" :src="user.avatar"></el-avatar>
        <p style="margin-top: 0px;">Cheems Doge</p>

    <!--    <p style="margin-top: 0px;">-【{{from}}】</p>-->
        <el-divider></el-divider>
    </div>
      <!--每日一句 https://v1.hitokoto.cn/?max_length=24-->
    <!--卡片中部--github地址-->
   <!-- <div class="card-middle">
      <div style="max-width: 40px;margin-left: 40px">
&lt;!&ndash;https://cdn.jsdelivr.net/gh/yubifeng/blog-resource/bloghosting//website/static/githubLogo.webp&ndash;&gt;
        <el-image :fit="fit"
                  src="https://edu-0110.oss-cn-beijing.aliyuncs.com/cilibog/libai.jpg"
                  style="cursor:pointer" @click="goToGithub"></el-image>
      </div>
    </div>-->

 <!--     <div @click="getDayOne">
          {{hitokoto}}
          -【{{from}}】
      </div>-->
<!--
      <p @click="getDayOne" style="margin-top: -2vh; margin-left: 0.8vw; font-size: 13px;">{{hitokoto}} </p>
-->
      <p style="margin-top: -2vh; margin-left: 0.8vw; font-size: 13px;">{{hitokoto}} </p>
      <!--卡片底部--个人喜好-->
    <div class="card-footer">
      <el-collapse>
        <el-collapse-item name="1" style="padding-left: 20px;padding-right: 20px" title="最喜欢的格言">
          <div>一命二运三风水，四积阴德五读书。</div>
        </el-collapse-item>
        <el-collapse-item name="2" style="padding-left: 20px;padding-right: 20px" title="最推荐的书籍">
          <div>白夜行、狼图腾、百年孤独、霍乱时期的爱情、富爸爸穷爸爸系列</div>
        </el-collapse-item>
        <el-collapse-item name="3" style="padding-left: 20px;padding-right: 20px" title="最推荐的电影">
          <div>肖申克的救赎、楚门的世界、和沙漠的五百天、盗梦空间、猫鼠游戏、爱乐之城、当幸福来敲门、钢琴家、海边的曼彻斯特、阿甘正传</div>
        </el-collapse-item>
        <el-collapse-item name="4" style="padding-left: 20px;padding-right: 20px" title="技术人路线图">
          <div>掌握一门语言、Java编程思想、设计模式、数据结构与算法、数据库架构、Redis设计思想、成就自己，成就他人</div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
    import axios from 'axios'

    export default {
  name: "Card",
  data() {
      return {
          hasLogin: false,
          fit: 'fill',
          user: {
              avatar: "http://www.cilicili.top/favicon.ico"
              // avatar: "https://cdn.jsdelivr.net/gh/yubifeng/blog-resource/bloghosting//website/static/websiteAvatar.webp"
              // avatar: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.soogif.com%2FLjU5a61jcXCJXwXrdFlfBefzrdrNgKu7.gif_s400x0&refer=http%3A%2F%2Fimg.soogif.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661349261&t=3d6c986e8ad7a397af86e95d2c874f2c"
          },
          hitokoto: '',
          from:'',
      }
  },
  methods: {
    //跳转到个人github
    goToGithub() {
      window.location.href = "https://github.com/coder-msc"
    },
      getDayOne() {
          // axios.get('https://v1.hitokoto.cn/?max_length=24')
          //     .then(response => (this.hitokoto = response)).catch()
          this.$axios.get('/hitokoto/dayone').then(res => {
              const dayone = res.data.data
              console.log("点击了事件")
              this.hitokoto=dayone.hitokoto
              this.from=dayone.from
          })
      }
  },
  created() {
      this.getDayOne()
  }
}
</script>

<style scoped>
.card {
  width: 250px;
  padding: 20px 0px 0px 0px;
  background-color: white;
}
.card-header {
  text-align: center;
}
.card-footer {
  margin-top: 10px;
}
.card:hover {
  -webkit-box-shadow: #ccc 0px 10px 10px;
  -moz-box-shadow: #ccc 0px 10px 10px;
  box-shadow: #ccc 0px 10px 10px;
}
</style>
